<script setup>
import CountUp from 'vue-countup-v3'
</script>
<template>
  <div class="statistics-cards">
    <div class="stat-card">
      <div class="stat-header">园区企业总数</div>
      <div class="stat-value">
        <CountUp :end-val="2458" :duration="2" />
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-header">信用信息归集总数</div>
      <div class="stat-value">
        <CountUp :end-val="15693" :duration="2" />
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-header">严重失信企业数量</div>
      <div class="stat-value danger">
        <CountUp :end-val="47" :duration="2" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.statistics-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(8px);
  
  &:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
  }
}

.stat-header {
  color: #94A3B8;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-value {
  color: #E2E8F0;
  font-size: 32px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  
  &.danger {
    color: #EF4444;
  }
}
</style>
